<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload=function(){
        var app=new Vue({
                el:'#app',

            methods:{
                addthing:function(){
                    this.todos.push({name:this.thing,done:false});
                },
                switchdel:function(index){
             this.todos[index].done=!this.todos[index].done;
                }
        },
            data:{
                thing:null,
                todos:[
                    {name:'吃饭',done:false},
                    {name:'睡觉',done:false},
                    {name:'哈哈',done:true}
                ]
            }
            ,computed:{
                done:function(){
                    var count=0;
                    for(var i=0;i<this.todos.length;i++){
                        if(this.todos[i].done){
                            count++;
                        }
                    }
                    return count;
                }
            }

            });

        }
    </script>
    <style>.del{text-decoration: line-through}</style>

</head>
<body>

      <div id="app">
      <h1>TODO LIST</h1>
          <input type="text" v-model="thing" @keyup.enter="addthing">
          <button v-on:click="addthing">添加</button>
          <div v-for="(todo,index) in todos">
      <input type="checkbox" :checked="todo.done" @click="switchdel(index)" >{{idx}}.
    <span :class="{delline:todo.done}">
    {{todo.name}}
        </span>

</div>
          总共{{todos.length}}个事项,{{done}}件事已完成 还有{{todos.length-done}}件事未完成
      </div>
</body>
</html>